<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<!-- <navigator open-type="navigateBack" class="back-btn">
				<image src="https://yun.qiongtuyule.com/static/close.png" class="icon_left"/>
			</navigator> -->
			<!-- <text class="title">项目列表管理</text> -->
			<view class="icons" @tap="onAdd">
				<view >创建项目</view>
				<!-- <image src="https://yun.qiongtuyule.com/static/submit.png" class="icon_right" @tap="onSubmit" /> -->
			</view>
		</view>

		<!-- 白色背景容器 -->
		<view class="project-wrapper">
			<view v-for="(item, index) in projectList" :key="index" class="project-item" @tap="goToDetail(item)">
				<text class="project-name">{{ item.name }}</text>
				<view class="project-right">
					<image src="https://yun.qiongtuyule.com/static/dele.png" class="icon" @tap.stop="onDele(item)" />
				</view>
			</view>
		</view>

		<!-- 新建项目弹窗 -->
		<view class="modal-mask" v-if="createModal">
			<view class="modal-box">
				<view class="modal-title">创建项目</view>

				<input class="modal-input" type="text" placeholder="请输入项目名称" v-model="form.name" />

				<input class="modal-input" type="number" placeholder="请输入项目排序" v-model="form.order" />

				<!-- 上传图标 -->
				<!-- 				<view class="upload-wrapper" @tap="chooseImage">
							<image v-if="form.icon" :src="form.icon" class="upload-icon-preview" mode="aspectFill" />
							<view v-else class="upload-box">
								<text class="plus">＋</text>
								<text class="upload-text">上传图标</text>
							</view>
						</view> -->
				<!-- 上传图标 -->
				<fileUploader :limitsize="10240" :maxcount="1" @get-img="getImg" v-if="createModal"></fileUploader>

				<!-- 底部按钮 -->
				<view class="modal-footer">
					<button class="cancel-btn" @tap="closeModal">取消</button>
					<button class="confirm-btn" @tap="submitForm">确定</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				projects: [],
				projectList: [],
				form: {
					name: '',
					order: '',
					icon: ''
				},
				createModal: false,
			};
		},
		onLoad() {
			this.showList();
		},
		methods: {
			closeCreateModal() {
				this.createModal = false;
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.form.icon = res.tempFilePaths[0];
					}
				});
			},
			async submitForm() {
				if (!this.form.name) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}

				const res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.projectCreate,
					data: {
						name: this.form.name,
						order: this.form.order,
						icon: this.form.icon
					},
					needLogin: true
				});

				if (res.code === 1) {
					uni.showToast({
						title: '创建成功',
						icon: 'success'
					});
					this.closeCreateModal();
					this.showList();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			},
			closeModal() {
				this.createModal = false;
			},
			getImg(data) {
				this.form.icon = data[0];
			},
			onAdd() {
				// 重置表单内容
				this.form = {
					name: '',
					order: '',
					icon: ''
				};
				// 显示弹窗
				this.createModal = true;
			},
			onSubmit() {
				uni.navigateBack();
			},
			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/project-detail?name=${item.name}`
				});
			},
			async showList() {
				let res = await this.$lib.$http.post({
					url: this.$lib.$urlMap.homeList,
					data: {
						page: 1,
						limit: 10
					},
					needLogin: true
				})
				if (res.code === 1) {
					this.projects = res.data
					this.projectList = res.data.map(p => ({
						name: p.depart_name,
						deviceCount: p.deviceCount,
						id: p.id
					}));
				}
			},
			async onDele(item) {
				if (item.deviceCount > 0) {
					uni.showModal({
						title: '无法删除',
						content: '该项目下还有设备，不能删除。',
						showCancel: false
					});
					return;
				}

				const confirmRes = await new Promise((resolve) => {
					uni.showModal({
						title: '确认删除',
						content: `确定要删除「${item.name}」项目吗？`,
						success: resolve
					});
				});

				if (confirmRes.confirm) {
					// 发请求删除
					const res = await this.$lib.$http.post({
						url: this.$lib.$urlMap.deleteProject,
						data: {
							id: item.id // 或其他唯一标识
						},
						needLogin: true
					});

					if (res.code === 1) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						this.showList(); // 重新刷新列表
					} else {
						uni.showToast({
							title: res.msg || '删除失败',
							icon: 'none'
						});
					}
				}
			}

		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 30rpx;
	}

	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal-box {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.modal-title {
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.modal-input {
		background-color: #f7f7f7;
		height: 80rpx;
		border-radius: 12rpx;
		padding: 0 24rpx;
		margin-bottom: 24rpx;
		font-size: 28rpx;
	}

	.upload-wrapper {
		margin: 20rpx 0;
	}

	.upload-box {
		width: 120rpx;
		height: 120rpx;
		border: 1px solid #ccc;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.plus {
		font-size: 48rpx;
		color: #aaa;
	}

	.upload-text {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 8rpx;
	}

	.upload-icon-preview {
		width: 120rpx;
		height: 120rpx;
		border-radius: 16rpx;
	}

	.modal-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #000;
		flex: 1;
		margin-right: 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
	}

	.confirm-btn {
		background-color: #000;
		color: #fff;
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 12rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 30rpx;
	}

	.back-btn {
		font-size: 40rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		flex: 1;
		text-align: center;
		margin-left: -40rpx;
		/* 为了让返回按钮不挤压标题居中 */
	}

	.icons {
		display: flex;
	}

	.icon_right {
		width: 39rpx;
		height: 27rpx;
		margin-left: 20rpx;
	}

	.icon {
		width: 29rpx;
		height: 29rpx;
		margin-left: 20rpx;
	}

	.icon_left {
		width: 38rpx;
		height: 38rpx;
	}

	/* 白色背景容器 */
	.project-wrapper {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	/* 单个项目项样式 */
	.project-item {
		padding: 30rpx;
		/* border-bottom: 1rpx solid #f0f0f0; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.project-item:last-child {
		border-bottom: none;
	}

	.project-name {
		font-size: 32rpx;
	}

	.project-right {
		display: flex;
		align-items: center;
		color: #999;
	}

	.device-count {
		margin-right: 10rpx;
	}

	.arrow {
		font-size: 28rpx;
	}
</style>